  // 类比图书管理案例

  // 需求1 ： 渲染学生列表 (封装函数)
  function initStudents() {

        axios({
          url:'/student/list',
          method:'get',
        
        }).then(({ data: res})=>{
          //成功回调
          // console.log(res)
          if(res.code==0){
            document.querySelector('tbody').innerHTML=res.data.map(item=>{
              return `
              <tr>
              <th scope="row">${ item.id }</th>
              <td>${ item.name }</td>
              <td>${ item.age }</td>
              <td>${ item.sex }</td>
              <td>${ item.group }</td>
              <td>${ item.phone }</td>
              <td>${ item.salary }</td>
              <td>${ item.truesalary }</td>
              <td>${ item.province+item.city+item.county }</td>
              <td>
                <button type="button" data-id="${ item.id }" class="update btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#updateModal">修改</button>
                <button type="button" data-id="${ item.id }" class="delete btn btn-danger btn-sm">删除</button>
              </td>
            </tr> 
              `
            }).join('')
          }
          
        })
      }
      // 页面加载，数据显示
      initStudents()

  // 需求2 删除学生信息  事件委托
      document.querySelector('tbody').addEventListener('click',function(e){
        // 判断是否是删除按钮，如果类名中没有 delete 就不再执行
        if(!e.target.classList.contains('delete'))  return
        // 询问框 ：  if + return  避免了 很多代码嵌套
        if(!confirm('确定删除该学生信息吗？')) return
        //  获取自定义属性值 id 后面发送Ajax请求 getAttribute可以获取任意名字  相当于dataset
        let id= e.target.getAttribute('data-id')
        // alert(id)
     

        axios({
          url:'/student/delete',
          method:'delete',
          params: { id }
        }).then(({ data:res })=>{
          //成功回调
          // console.log(res)
          if(res.code==0){
            toastr.success('恭喜您，删除成功')
            initStudents()
          }
        })
      })

  //  需求 3 省  市  区 三级联动渲染 (进行封装,让添加和修改两个弹出框都可以调动)
 function setCity(id){

      //   3.1 渲染省 - 不需要事件触发  页面一加载,立刻渲染
      let select1 = document.querySelector(`#${id} [name="province"]`)
      
      axios({
        url:'/geo/province',
        method:'get',
      }).then(({ data: res })=>{
        //成功回调
        // 返回的数据直接就是一个数组，不需要判断状态业务码
        // console.log(res)
        // 定义一个数组,设置默认值 --省--
        let arr = ['<option value="">--省--</option>']
        // 遍历生成多个 Option, 添加到数组中
        res.forEach(item => {
          // 删除每一个数组中的 selected 属性
         arr.push(`<option value="${item}">${item}</option>` )
        })
        // 渲染
        select1.innerHTML=arr.join('')
      })

      //   3.2 渲染市 - 需要省改变的事件触发
    let select2 = document.querySelector(`#${id} [name="city"]`)
    // 市改变,触发县的改变
    select1.onchange=function(){
      // 省份修改,县无条件清空
      select3.innerHTML='<option value="">--县--</option>'
      if(this.value==''){
        select2.innerHTML='<option value="">--市--</option>'
        // 停止发送Ajax请求
        return
      }
      axios({
        url:'/geo/city',
        method:'get',
        params: {
          pname:select1.value
        }
      }).then(({ data:res })=>{
        //成功回调
        // console.log(res)
        
        let arr=['<option value="">--市--</option>']
        // 遍历数组
        res.forEach(item=>{
          arr.push(`<option value="${item}">${item}</option>` )
        })
        select2.innerHTML=arr.join('')
      })
    }



      //   3.3 渲染区 - 需要市改变的事件触发
      let select3 = document.querySelector(`#${id} [name="county"]`)
   
      
      // 市改变,触发县的改变
      select2.onchange=function(){
           // 非空判断
        if(this.value==''){
          // 市改变,区清空
          select3.innerHTML='<option value="">--区--</option>'
          // 停止发送Ajax请求
          return
        }
        axios({
          url:'/geo/county',
          method:'get',
          // 
          params: {
            pname:select1.value,
            cname:select2.value
          }
        }).then(({ data:res })=>{
          //成功回调
          // console.log(res)
          let arr=['<option value="">--县--</option>']
          // 遍历数组
          res.forEach(item=>{
            arr.push(`<option value="${item}">${item}</option>` )
          })
          // 渲染
          select3.innerHTML=arr.join('')
        })
      }




}
  // 调用两次  添加和修改
  setCity('addModal')
  setCity('updateModal')


  //  需求4 添加学员
 let formAdd= document.querySelector('#addModal form')
 formAdd.onsubmit=function(e){
  e.preventDefault()
  axios({
    url:'/student/add',
    method:'post',
    // jQuery  提供的用于获取全部
    // data: $(this).serialize(),
    data: $(this).serialize(),
  }).then(({ data:res })=>{
    //成功回调
    console.log(res)
    if(res.code==0){
      // 成功提示
      toastr.success('恭喜您,添加成功')
      // 关闭添加框
      document.querySelector('#addModal .btn-close').click()
      // 重新渲染数据
      initStudents() 
      // 清空表单
      formAdd.reset()
    }
  })
 }
   
  //  需求5 获取/修改form表单数据
  document.querySelector('tbody').addEventListener('click',function(e){
    // 判断点击的是否是修改按钮
    if(!e.target.classList.contains('update'))  return
    // 获取自定义ID值
    let id = e.target.dataset.id
    // alert(id)
    axios({
      url:'/student/one',
      method:'get',
      params: {
        id:id
      }
    }).then(({ data:res })=>{
      //成功回调
      console.log(res)
      if(res.code==0){
        // 手动赋值 名字 , 电话, 年龄, 期望薪资 , 实际薪资 
        document.querySelector('#updateModal  [name="name"]').value=res.data.name
        document.querySelector('#updateModal  [name="age"]').value=res.data.age
        document.querySelector('#updateModal  [name="phone"]').value=res.data.phone
        document.querySelector('#updateModal  [name="salary"]').value=res.data.salary
        document.querySelector('#updateModal  [name="truesalary"]').value=res.data.truesalary
        // 组别 ,性别,籍贯(单选和下拉菜单)
        document.querySelector('#updateModal  [name="group"]').value=res.data.group
        let inps = document.querySelectorAll('#updateModal [name="sex"]')
        for(let i = 0; i<inps.length ; i++){
          // 优化 前边的= 是赋值  后边的== 是判断
          inps[i].checked = res.data.sex== inps[i].value

          // // 原理
          // if(res.data.sex==inps[i].value){
          //   inps[i].checked =true
          // }else{
          //   inps[i].checked =false
          // }
        } 
        document.querySelector('#updateModal  [name="province"]').value=res.data.province
        document.querySelector('#updateModal  [name="city"]').innerHTML=`<option value="${res.data.city}">${res.data.city}</option>`
        document.querySelector('#updateModal  [name="county"]').innerHTML=`<option value="${res.data.county}">${res.data.county}</option>`
        //  修改都这么做: 为了方便将来修改用户信息,一般会用隐藏域装ID属性
         document.querySelector('#updateModal  [name="id"]').value=res.data.id
      }
      
    })
  })

  //  需求6 修改学员信息  渲染学生信息
  document.querySelector('#updateModal form').addEventListener('submit',function(e){
    e.preventDefault()
    axios({
      url:'/student/update',
      //  put 是提交方法
      method:'put',
      //  put 使用 data ,  $(this).serialize() 是jQuery方式获取表单数据
      data:$(this).serialize(),

    }).then(({ data:res })=>{
      //成功回调
      // console.log(res)
      // 判断
      if(res.code==0){
        // 提示
        toastr.success('恭喜您,修改成功')
      // 关闭修改框
      document.querySelector('#updateModal .btn-close').click()
      // 重新渲染数据  (不需要清空表单)
      initStudents() 
      }
    })
  })

